<template>
  <div class="population">
    <div class="add_btn_top">
      <el-button
        v-permission="[1, 'button']"
        slot="reference"
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="dialogAdd = true"
        >添加</el-button
      >
    </div>

    <!-- 添加弹窗 -->

    <Addnewsite
      :dialogAdd="dialogAdd"
      @submitF="submitForm"
      @closedialog="closedialogForm"
    />

    <div v-permission="[4, 'list']">
      <EmptyData
        v-if="areaList && areaList.length == 0"
        v-init-screen-h
      ></EmptyData>
      <el-row class="areaBox" :gutter="20" v-init-screen-h v-else>
        <el-col
          class="mb_sm"
          :xs="12"
          :sm="12"
          :md="8"
          :lg="6"
          :xl="4"
          v-for="(area, index) in areaList"
          :key="index"
        >
          <ImgTitleContent
            :item="area"
            @handNavTo="thesite(area.token)"
          ></ImgTitleContent>
        </el-col>
      </el-row>
      <Pagination
        @pagination="pagination"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :pageSizes.sync="pageSizes"
      />
    </div>
  </div>
</template>

<script>
import Pagination from "../../views/common/page.vue";
import "../../assets/style/siteCss/siteListStyle.css";
import Addnewsite from "./addnewsite.vue";
import ImgTitleContent from "@/components/ImgTitleContent";
import EmptyData from "@/views/common/emptyData";
import { getAreatypes } from "@/api/superlinkAreat";
import { TOKEN_RULES } from "@/utils/local";
export default {
  components: {
    Addnewsite,
    Pagination,
    ImgTitleContent,
    EmptyData,
  },
  data() {
    return {
      dialogAdd: false,
      siteTabs: "first",
      ruleForm: {
        token: "",
        name: "",
        imageUrl: "",
        description: "",
      },

      rules: {
        token: TOKEN_RULES,
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 2, max: 15, message: "输入格式不正确", trigger: "blur" },
        ],
        imageUrl: [
          { required: true, message: "请填写图片链接", trigger: "blur" },
        ],
      },
      areaList: [],
      pageNum: 1,
      total: 0,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
    };
  },
  mounted() {
    this.areaList = null;
    this.getAreaTypes();
    // 单页面背景色
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#F3F4F9");
  },
  beforeDestroy() {
    // 单页面背景色
    document.querySelector("body").removeAttribute("style");
  },
  methods: {
    closedialogForm(flg) {
      this.dialogAdd = flg;
    },
    thesite(token) {
      //this.$router.push("thesite");
      this.$router.push({ path: "/thesite", query: { areaToken: token } });
    },
    submitForm(flg) {
      this.dialogAdd = flg;
      this.getAreaTypes();
    },
    //列表及涵盖中调用
    getAreaTypes(val) {
      var that = this;
      if (val) {
        that.currentPage = val.currentPage;
        that.pageSize = val.pageSize;
      }
      var param = {
        includeContainedAreaTypes: true,
        page: that.pageNum,
        pageSize: that.pageSize,
      };
      getAreatypes(param).then((res) => {
        that.areaList = res.data.results || [];
        that.total = res.data.numResults;
      });
    },
    //分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.getAreaTypes();
    },
  },
};
</script>

<style scoped lang='scss'>
.population {
  height: 100%;
  background: #fff;
  padding: 20px;
  padding-bottom: 0;
  position: relative;
}
</style>
